<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import use7Day from '../hooks/date-utils';
import { Date as AppNutIconDate } from '@nutui/icons-vue-taro';
import Date7Day from '../type';
import dayjs from 'dayjs';
const props = defineProps<{
  /**
   * 预约时间戳
   */
  appointmentTime: Number;
}>();

const state: {
  /**
   * 7天时间
   */
  date7Day: Date7Day[];
  /**
   * 当前7天选中的index
   */
  currentIndex: number;
  /**
   *日历是否显示
   */
  timeCalendarIsShow: boolean;
} = reactive({
  date7Day: [],
  currentIndex: 0,
  timeCalendarIsShow: false,
});

const emits = defineEmits<{
  (e: 'onSelected', appointmentTime: number): void;
}>();

onMounted(() => {
  //props没改变，刷新页面的时候
  create7DayByTimestamp(props.appointmentTime.valueOf());
});

const { date7DayByTimestamp, date7Day, getNewTimestamp } = use7Day();
/**
 * 两种情况创建7day
 * 1.初始化创建
 * 2.日历选择的时间戳创建
 */
function create7DayByTimestamp(timestamp: number) {
  state.date7Day = [];
  state.currentIndex = 0;
  date7DayByTimestamp(timestamp);
  state.date7Day.push(...date7Day);
}

/**
 * 7天选择
 * @param index 选中的index天
 */
function selectedDay(index: number) {
  state.currentIndex = index;
  emits('onSelected', state.date7Day[index].timestamp);
}

/**
 * 选择日历时间
 */
function chooseDate() {
  state.timeCalendarIsShow = !state.timeCalendarIsShow;
}
/**
 * 日历选择时间
 * @param date 日期
 */
function chooseValue(date: string | string[]) {
  const newTimestamp = getNewTimestamp(date[3]);
  create7DayByTimestamp(newTimestamp);
  emits('onSelected', newTimestamp);
}
</script>
<template>
  <view class="meeting-7-day-list">
    <view
      v-for="(dayItem, index) in state.date7Day"
      :key="index"
      class="meeting-7-day-list__item"
      :style="{ color: state.currentIndex === index ? '#333' : '' }"
      @click="selectedDay(index)"
    >
      <view
        ><text>{{ dayItem.month }}月</text></view
      >
      <view
        class="meeting-7-day-list__item__day"
        :class="state.currentIndex === index ? 'meeting-7-day-list__item__day--active' : ''"
        ><text>{{ dayItem.day }}</text></view
      >
    </view>
    <view class="meeting-7-day-list__icon">
      <app-nut-icon-date @click="chooseDate" />
    </view>
  </view>
  <nut-calendar
    v-model:visible="state.timeCalendarIsShow"
    :start-date="dayjs().format('YYYY-MM-DD')"
    :default-value="dayjs().format('YYYY-MM-DD')"
    @choose="chooseValue"
  />
</template>
<style lang="scss">
.meeting-7-day-list {
  display: flex;
  align-items: center;
  background-color: white;
  font-size: 24px;
  color: #999;
  padding: 20px 0;
  &__item {
    display: inline-block;
    flex: 1;
    text-align: center;
    &__day {
      line-height: 60px;
      width: 60px;
      text-align: center;
      margin: 10px;
      &--active {
        background-color: #507aee;
        border-radius: 50%;
        color: white;
      }
    }
  }

  &__icon {
    display: inline-block;
    flex: 1;
    color: #333;
    text-align: center;
  }
}
</style>
../hooks/date-utils
